<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
</head>
<!-- 2.创建一个舞台 -->
<div id="root">

</div>

<body>
    <script>
        const root = ReactDOM.createRoot(document.getElementById('root'));
        /**
         * 创建React 元素[虚拟dom]
         * React.createElement(标签名,标签属性,子元素1,子元素2,...)
         */
        // 1.创建一般元素
        const oDiv = React.createElement('div',{id: 'box',name: '盒子'},'我是待渲染的div')
        // console.log(oDiv);
        // oDiv 就是一个对象
        root.render(oDiv)
        // 2. 如果元素没有属性,怎么创建,第二个参数需要占位 {},null,undefined

        const oSpan = React.createElement('span',{},'我是span标签')
        root.render(oSpan)

        // 3. 特殊属性ClassName
        const oClass = React.createElement('div',{className: 'rapper'},'我们都是rapper')
        root.render(oClass)

        // 4. 嵌套元素的创建
        const oNested = React.createElement('div',{className: 'wrapper'}, React.createElement(
            'div',
            {className: 'swiper'},
            React.createElement(
                'span',
                {className: 'swiperImg'},
                '我是swiper图片'
            )
        ))
        root.render(oNested)
        // root.render((
        //     <div><h1>测试模板</h1></div>
        // ));
    </script>
</body>
</html>